<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../layui-v2.9.0/layui/css/layui.css" media="all">
    <script src="../../layui-v2.9.0/layui/layui.js"></script>
</head>
<body>
<div style="width: 1380px">

<!--    添加顶部导航栏-->


    <div class="layui-col-xs10 layui-col-lg-offset1  " style="height: auto">
        <div class="layui-panel ">
            <div style="padding: 32px;display: flex" class="layui-col-xs12 ">
                <img src="../../img/游戏.png" style="transform: scale(2); margin-top: 13px"
                     class="layui-nav-img">
                <p style="white-space:pre;margin-top: 15px;font-weight: bold;margin-left: 20px;font-size: 20px;" >原神  </p>
                <p style="white-space:pre;margin-top: 17px"><i class="layui-icon layui-icon-username"></i> 在线人数: 40    </p>
                <p style="margin-top: 17px"><i> 帖子 <span class="layui-badge"> 4000 </span></i>
                <p style="white-space:pre;">      </p>
                <li class="layui-icon layui-icon-return layui-icon-hover" id="return" data-target="thumbs" style="font-size: 20px; margin-bottom:auto;margin-left: 570px">返回贴吧</li>
            </div>
            <div class="layui-col-xs7   layui-bg-gray" style=";height: auto;display: flex;margin-bottom: 10px">
                <p style="margin-bottom: 5px;margin-left:5px;font-weight: bold;font-size: 20px">楼主：沟槽的策划，针对我不给退款是吧!</p>
                <p style="white-space:pre;">      </p>
                <li class="layui-icon layui-icon-rate" id="favoriteIcon" >收藏</li>
                <p style="white-space:pre;">  </p>
                <li class="layui-icon layui-icon-reply-fill" lay-on="reply-louzhu" id="replyButton" >回复</li>

            </div>
            <div class="layui-bg-gray"  id="top-tiezi" style="margin-top: auto;width: 850px;height:auto;float: left" >
                <div class="layui-row layui-col-space15">
<!--                    这里是自己刚发表的评论-->
                    <div id="frist" class="layui-col-xs12 ">
                        <div class="layui-card-header"  style="display: flex">
                            <img src="../../img/游戏.png" class="layui-nav-img">
                            <p class="user";>
                                <a href="" class="user-mes1">小马宝莉  </a>
                            </p>
                        </div>
                        <div class="layui-card-body"style="font-size: 18px;">
                            <p id="MyComment"></p>
                            <div >
                                <img src="../../img/游戏.png" class="layui-card-img">


                            </div>
                        </div>
                    </div>
<!--                    这里是别人的评论区-->
                    <div class="layui-col-md12 " id="ID-flow-demo-manual">
                        <div class="layui-card">
<!--                            <div class="layui-card-header"  style="display: flex">-->
<!--                                <img src="../img/01.png" class="layui-nav-img">-->
<!--                                <p class="user";>-->
<!--                                    <a href="" class="user-mes1 layui-icon-hover">小马宝莉  </a>-->
<!--                                </p>-->
<!--                            </div>-->
<!--                            <div class="layui-card-body"style="font-size: 18px;">-->
<!--                                还有就是波普寮犬可以入吗？比归零者哪个好？<br>-->
<!--                                <div >-->
<!--                                    <img src="../img/02.jpg" class="layui-card-img">-->
<!--                                    <div style="display: flex">-->
<!--                                        <li class="layui-icon layui-icon-heart" id="thumbs" data-target="thumbs" style="font-size: 30px; margin-bottom:20px;margin-left: 670px" ></li>-->
<!--                                        <li class="layui-icon layui-icon-reply-fill" style="font-size: 27px; margin-bottom: 20px;margin-left: 40px"  lay-on="test-iframe-curl"></li>-->
<!--                                    </div>-->

<!--                                </div>-->
<!--                            </div>-->

                            <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

                            </div>

                        </div>
                    </div>
<!--                    //下面是评论画板区-->
                    <div class="layui-row layui-col-space15" id="commentArea">
                        <div class="layui-col-md12 " >
                            <div class="layui-card">
                                <div class="layui-card-header"  style="display: flex">
                                    <img src="../../img/游戏.png" class="layui-nav-img" >
                                    <p class="user";>
                                        <a href="" class="user-mes1 layui-icon-hover">小马宝莉  </a>
                                    </p>
                                </div>
                                <div class="layui-card-body"style="font-size: 18px;">
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="upload-img">
                                            <i class="layui-icon layui-icon-upload"></i> 图片上传
                                        </button>
                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                                            预览图：
                                            <div class="layui-upload-list" id="upload-demo-preview"></div>
                                        </blockquote>
                                    </div>
                                    <div class="layui-form">
                                        <label>
                                            <textarea id="commentInput" name="" placeholder="评论......" class="layui-textarea"></textarea>
                                        </label>
                                    </div>
                                    <div class="layui-btn-container">

                                        <button type="button" class="layui-btn layui-btn-normal" onclick="postComment()">发表评论</button>

                                    </div>
                                </div>

                                <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs3 layui-col-xs-offset1 layui-bg-gray" style="margin-top: auto;height:auto;float: right;margin-left: 0">
                <div class="layui-bg-gray" style="height:auto">
                    <div >
                        <h3 style="text-align: center" class="mbx">分类</h3>
                        <hr>
                        <span class="layui-breadcrumb span_css" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index1">首页</a>
                      <a href="" class="a_index1">国际新闻</a>
                    </p>
                    <p class="p_index">
                  <a href="" class="a_index1">亚太地区</a>
                  <a><cite>正文</cite></a>
                    </p>
                </span>
                    </div>
                    <div>
                        <h3 style="text-align: center" class="mbx">门户频道</h3>
                        <hr>
                        <span class="layui-breadcrumb span_css" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index1">娱乐</a>
                      <a href="" class="a_index1">八卦</a>
                      <a href="" class="a_index1">体育</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index1">搞笑</a>
                      <a href="" class="a_index1">视频</a>
                      <a href="" class="a_index1">游戏</a>
                    </p>
                    <p class="p_index">
                        <a href="" class="a_index1">综艺</a>
                    </p>
                </span>
                    </div>

                    <!--        贴吧分类-->
                    <div style="margin-top: 30px">
                        <h6>趣点分类 </h6>  <hr>
                    </div>
                    <div class="div_index">
                        <i class="layui-icon layui-icon-rate-solid"></i> 娱乐明星
                        <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index3">网络红人</a>
                      <a href="" class="a_index3">娱乐明星</a>
                      <a href="" class="a_index3">导演</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index3">时尚人物</a>
                      <a href="" class="a_index3">明星</a>
                      <a href="" class="a_index3">粉丝组织</a>
                    </p>
                </span>
                    </div>
                    <hr>
                    <div class="div_index">
                        <img class="img-index" src="../../img/体育.png" alt="!"> 体育
                        <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">足球</a>
                      <a href="" class="a_index4">篮球</a>
                      <a href="" class="a_index4">乒乓球</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">网球</a>
                      <a href="" class="a_index4">舞蹈</a>
                      <a href="" class="a_index4">健身</a>
                    </p>
                </span>
                    </div>
                    <hr>
                    <div class="div_index">
                        <img class="img-index" src="../../img/游戏.png" alt="!"> 游戏
                        <span class="layui-breadcrumb" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">单机</a>
                      <a href="" class="a_index4">网游</a>
                      <a href="" class="a_index4">手游</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">休闲</a>
                      <a href="" class="a_index4">竞技</a>
                      <a href="" class="a_index4">MOBA</a>
                    </p>
                </span>
                    </div>
                    <hr>
                    <div class="div_index">
                        <img class="img-index" src="../../img/闲趣.png" alt="!">  闲·趣
                        <span class="layui-breadcrumb layui-font-black" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index4">萌宠</a>
                      <a href="" class="a_index4">吐槽</a>
                      <a href="" class="a_index4">重口味</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index4">星座</a>
                      <a href="" class="a_index4">恐怖</a>
                      <a href="" class="a_index4">喵星人</a>
                    </p>
                </span>
                    </div>

                    <hr>
                    <div class="div_index">
                        <img class="img-index" src="../../img/动漫.png" alt="!">  动漫宅
                        <span class="layui-breadcrumb layui-font-black" lay-separator=" ">
                    <p class="p_index">
                      <a href="" class="a_index3">国产动漫</a>
                      <a href="" class="a_index3">日本动漫</a>
                      <a href="" class="a_index3">玄幻</a>
                    </p>
                    <p class="p_index">
                      <a href="" class="a_index3">搞笑漫画</a>
                      <a href="" class="a_index3">热血动漫</a>
                      <a href="" class="a_index3">推理</a>
                    </p>
                </span>
                    </div>
                </div>


            </div>
        </div>

    </div>



</div>
<script>
    document.getElementById('favoriteIcon').addEventListener('click', function() {
        // 切换类
        if (this.classList.contains('layui-icon-rate')) {
            this.classList.remove('layui-icon-rate');
            this.classList.add('layui-icon-rate-solid');
        } else if (this.classList.contains('layui-icon-rate-solid')) {
            this.classList.remove('layui-icon-rate-solid');
            this.classList.add('layui-icon-rate');
        }
    });
    //点击发表评论按钮，展示内容
    function postComment() {
        // 获取输入框的值
        var comment = document.getElementById('commentInput').value;

        // 清除之前的内容（可选）
        document.getElementById('MyComment').textContent = '';

        // 将内容设置到<p>标签中
        document.getElementById('MyComment').textContent = comment;
        // 获取目标元素的顶部位置
        var topNav = document.getElementById('top-tiezi');
        if (topNav) {
            // 滚动到目标元素的位置
            window.scrollTo(0, topNav.offsetTop);
        }
    }
//回复跳转
    layui.use(function(){
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        // 事件
        util.on('lay-on', {

            'test-iframe-curl': function(){
                layer.open({
                    type: 2,
                    title: '回复',
                    shadeClose: true,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1000px', '550px'],
                    content: 'reply-page.html'
                });
            }
        })
    });
    layui.use(function(){
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        // 事件
        util.on('lay-on', {
            'reply-page': function(){
                layer.open({
                    type: 2,
                    title: '评论',
                    shadeClose: true,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1000px', '550px'],
                    content: 'reply-page.html'
                });
            }
        })
    });
    // layui.use(function(){
    //     var layer = layui.layer;
    //     var util = layui.util;
    //     // 事件
    //     util.on('lay-on', {
    //         'reply-page': function(){
    //             layer.prompt({title: '请输入文本', formType: 2}, function(value, index, elem){
    //                 if(value === '') return elem.focus();
    //                 layer.msg('获得：'+ util.escape(value)); // 显示 value
    //                 // 关闭 prompt
    //                 layer.close(index);
    //             });
    //         },
    //
    //
    //     })
    //
    // });
    // layui.use(function(){
    //     var layer = layui.layer;
    //     var util = layui.util;
    //     // 事件
    //     util.on('lay-on', {
    //         'test-iframe-curl': function(){
    //             layer.prompt({title: '请输入文本', formType: 2}, function(value, index, elem){
    //                 if(value === '') return elem.focus();
    //                 layer.msg('获得：'+ util.escape(value)); // 显示 value
    //                 // 关闭 prompt
    //                 layer.close(index);
    //             });
    //         },
    //
    //
    //     })
    //
    // });


    //点赞按钮的响应事件
    var isLiked = false; // 用来跟踪按钮状态的变量
    function trance(){
        let thumb = document.getElementsByClassName('thumbs')
        for(let i=0;i<thumb.length;i++){
            if (thumb[i].classList.contains('layui-icon-heart')) {
                // 如果已经被点击过，恢复默认颜色（假设默认颜色是黑色）
                thumb[i].classList.remove('layui-icon-heart'); // 或者设置为您想要的默认颜色，如 'black'
                thumb[i].classList.add('layui-icon-heart-fill');
                isLiked = false; // 重置状态
            } else {
                // 如果未被点击过，设置颜色为红色
                thumb[i].classList.remove('layui-icon-heart-fill'); // 或者设置为您想要的默认颜色，如 'black'
                thumb[i].classList.add('layui-icon-heart');
                isLiked = true; // 更新状态
            }
        }
    }
    //点击回复回到页面下方
    document.getElementById('replyButton').addEventListener('click', function() {
        // 滚动到页面底部
        window.scrollTo(0, document.body.scrollHeight);
        // 或者，如果你想要平滑滚动（需要浏览器支持）
        // window.scroll({
        //     top: document.body.scrollHeight,
        //     behavior: 'smooth'
        // });
    });
    //上传图片方法
    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 多图片上传
        upload.render({
            elem: '#upload-img',
            url: '', // 实际使用时改成您自己的上传接口即可。
            multiple: true,
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#upload-demo-preview').append('<img src="'+ result +'" alt="'+ file.name +'" style="width: 90px; height: 90px;">')
                });
            },
            done: function(res){
                // 上传完毕
                // …
            }
        });
    });
    layui.use(function(){
        var flow = layui.flow;
        // 流加载实例
        flow.load({
            elem: '#ID-flow-demo-manual', // 流加载容器
            scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: false,
            isLazyimg: true,
            done: function(page, next){ // 加载下一页

                // 模拟插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < 2; i++){
                        lis.push('<div class="layui-card">' +
                            '<div class="layui-card-header" style="display: flex">' +
                            '<img src="../../img/游戏.png" class="layui-nav-img">' +
                            '<p class="user">' + // 注意这里移除了不必要的分号
                            '<a href="" class="user-mes1">小马宝莉</a>' +
                            '</p>' +
                            '</div>' +
                            '<div class="layui-card-body" style="font-size: 18px;">' +
                            '道聚城买的，全程手机操作，2 个小时了还没回复，沟槽的策划要是搞针对，今晚直接欧门大招传送到他家轰个晚安焰火<br>' +
                            '<div>' +
                            '<img src="../../img/游戏.png" class="layui-card-img">' +
                            '<div style="display: flex">' +
                            '<li class="layui-icon layui-icon-heart thumbs" onclick="trance()" data-target="thumbs" style="font-size: 30px; margin-bottom:20px;margin-left: 670px" ></li>' +
                            '<li id="reply-people" class="layui-icon layui-icon-reply-fill" style="font-size: 27px; margin-bottom: 20px;margin-left: 40px" lay-on="test-iframe-curl"></li>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>')
                    }

                    //添加对应id监听事件
                    next(lis.join(''), page < 1000); // 假设总页数为 6
                }, 520);
            }
        });
    });
    layui.use(['jquery'], function(){
        var $ = layui.jquery;

        // 绑定点击事件
        $('#return').on('click', function(){
            window.location.href = 'index.html'; // 跳转到index.htm页面
        });
    });



</script>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<style>
    /* styles.css */
    .nav-profile {
        display: flex;
        align-items: center;
    }

    .nav-profile-img {
        position: relative;
        margin-right: 10px;
    }
    a{
        margin-left: 10px;
    }
    .mbx{
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .span_css{
        margin-top: 20px
    }
    /*标签导航*/
    .a_index1{
        margin-left: 20px;
        margin-top: 20px;
        /*text-decoration: underline;*/
    }
    .a_index3{
        font-size: 13px;
        width: 5em;
        /*margin-left: 20px;*/
        margin-top: 20px;
    }
    a:hover{
        text-decoration: underline;
    }
    .a_index4{
        font-size: 15px;
        width: 4em;
        margin-left: 10px;
        margin-top: 20px;
        text-align: center;
    }
    .p_index{
        color: black;
        margin-top: 10px;
    }
    .div_index{
        padding: 10px;
    }
    .p_index_color {
        background-color: #dbfbf0; /* 鼠标移入时的背景颜色 */
    }
    /*标签图片*/
    .img-index{
        width: 20px;
        height: 20px;
    }
    hr{
        padding: 0;
        margin: 0;
    }
    .logo_img{
        width: 40px;
        height: 30px;
    }
    h3{
        margin-top: 0;
    }
    .layui-card-img { /* 使用新的类名或确保选择器能覆盖现有样式 */
        width: 200px; /* 假设我们想要将图片宽度设置为200px，您可以根据需要调整 */
        height: auto; /* 保持图片的高宽比 */
        border-radius: 0; /* 移除边框圆角 */
        border: none; /* 如果图片有边框，也移除它 */
        /* 可以添加其他图片样式，比如margin, padding等 */
    }
    .layui-icon-hover {
        color: blue; /* 或者其他您想要的颜色 */
    }
    .layui-btn-small {
        padding: 1px 10px;
        font-size: 15px;
    }
</style>

</body>
</html>